<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
    <meta name="wap-font-scale" content="no">
    <meta name="screen-orientation" content="portrait">
    <meta name="x5-orientation" content="portrait">
    <meta name="x5-fullscreen" content="true">
    <meta name="format-detection" content="telephone=no,email=no,address=no,date=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
    <meta name="msapplication-tap-highlight" content="no" />
    <link rel="stylesheet" href="../../common/css/reset.css">
    <link rel="stylesheet" href="../../common/css/public.css">

</head>
<body>
    <div class="top_fixed">
        <!--头部返回与标题-->
        <header id="top_back" class="txt_center">
            <a  onclick="AnroidWebActivity.goBack()"  class="back_btn"></a>
            <h3 class="tableBox">注册</h3>
        </header>
    </div>
    <div style="height:1.6rem;"></div>

    <!-- section 主体 -->
    <section class="wrap txt_center">
        <p class="safe_city">注册城市安全管家</p>
        <div class="clearfix">
            <div class="scanning tableBox" id="sn-code">
                <img src="../../common/image/saomiao.png" class="txt_block">
                <span class="txt_block">请输入注册码</span>
            </div>
            <p class="fr no_equip">注册码是必填项</p>
        </div>
        <div id="txtPart">
            <form action="">
                <dl class="over_hide clearfix">
                    <dt class="fl">
                        <i class="bg_eq person"></i>
                    </dt>
                    <dd class="fl error_warn">
                        <input 
                                type="number"
                                name=""
                                class="formInput"
                                placeholder="输入手机号"
                                data-reg="^1(1|3|4|5|7|8|9|2)\d{9}$"
                                id="mobile"
                                data-empty="手机号码不能为空"
                                data-error="手机号格式错误"
                                data-correct="输入手机号"
                                oninput="if(value.length>0)value=value.slice(0,11)"
                            >
                        <span class="hide warn_style"></span>
                    </dd>
                </dl>
                <div id="codeBox" class="clearfix">
                    <dl class="over_hide clearfix codeBox  fl">
                        <dt class="fl">
                            <i class="bg_eq codes"></i>
                        </dt>
                        <dd class="fl">
                            <input
                                    type="number"
                                    name=""
                                    maxlength="4"
                                    placeholder="验证码"
                                    id="codes"
                                    class="formInput"
                                    data-reg="^[0-9]{4}"
                                    data-error="验证码格式错误"
                                    data-correct="验证码"
                                    oninput="if(value.length>0)value=value.slice(0,4)"
                             >
                        </dd>
                    </dl>
                    <button class="fr" type="button"  id="get_code">获取验证码</button>
                </div>

                <dl class="over_hide clearfix">
                    <dt class="fl">
                        <i class="bg_eq key"></i>
                    </dt>
                    <dd class="fl">
                         <a href="javascript:;" class="pass_eye">
                             <em class="bg_eq  pCenter"></em>
                         </a>
                        <input 
                                type="password"
                                placeholder="设置密码"
                                class="formInput  pass_mode"
                                data-empty="请输入密码登录"
                                data-error="密码格式错误"
                                data-correct="设置密码"
                                data-reg="^[A-Za-z0-9]{8,16}$"
                                maxlength="16"
                                autofocus="autofocus" 
                        >  
                    </dd>
                </dl>
                <p class="info">
                   密码格式：长度在8~16位之间，数字，大写字母，<br>小写字母组成
                </p>
                <span class="warn_style" style="right:1.5rem;"></span>
                <button  type="button" class="public_button  block" id="res_btn" disabled>注册</button>
            </form>
        </div>
        <p class="agreements">
            <img 
                    id="agree_btn" 
                    src="../../common/image/arguments_btn_active.png"  
                    data-tog="../../common/image/arguments_btn.png"
            >
            <span>我已经阅读并接受</span>
            <a href="javascript:;" id="agree_link">《城市安全管家APP软件许可与服务协议》</a>
        </p>
    </section>


     <!-- 注册验证模态框 -->
     <section class="model hide"  id="registerModal">
        <div class="boxCont pCenter txt_center">
            <h3>输入验证码</h3>
            <dl class="clearfix">
                <dt class="fl">
                    <input
                            type="number"
                            id="random_code"
                            class="formInput"
                            value=""
                            placeholder="输入验证码"
                            data-empty="验证码不能为空"
                            data-overtime="验证码输入超时"
                            data-error="验证码输入有误"
                            data-correct="输入验证码"
                            name=""
                            maxlength="4"
                            oninput="if(value.length>0)value=value.slice(0,4)"
                        >
                </dt>
                <dd class="fl" id="code_img">
                    <img src="" alt="" class="eq_resize" id="codeImg">
                </dd>
            </dl>
            <p class="sureBtn txt_center">确定</p>
            <a href="javascript:;" class="closed_btn"></a>
        </div>
    </section>

    <!--先选择是否是输入还是扫描-->
    <section class="model hide" id="choose_sn">
        <div class="boxCont pCenter txt_center">
            <h3>请选择输入状态</h3>
            <a href="javascript:;" class="closed_btn"></a>
            <button type="button" id="sn_input_hand">手动输入</button>
            <button type="button" id="scan">扫 一 扫</button>
        </div>
    </section>

    <!--手动输入SN码-->
    <section class="model hide" id="hand_sn">
        <div class="boxCont pCenter txt_center">
            <h3>输入验证码</h3>
            <input type="text" placeholder="输入注册码" id="sn_put" class="sn_put">
            <p class="sureBtn txt_center" id="sn_sure_btn">确定</p>
            <a href="javascript:;" class="closed_btn"></a>
        </div>
    </section>

    <!-- 界面加载 -->
    <section class="loading_model hide">
        <img src="../images/loading.gif" alt="" class="pCenter">
    </section>

</body>
</html>
<script src="../../common/script/phoneSize.js"></script>
<script src="../../common/script/jquery-1.11.2.js"></script>
<script src="../public/westv.js"></script>
<script src="../../common/script/public.js"></script>
<script src="js/snCode.js"></script>
<script src="../public/baseAll.js"></script>
<script type="text/javascript">
    (function(){
        function RegisterMode(){}//注册模块
        RegisterMode.prototype={
            init:function(opts){
                this.required_register=opts.required_register||false;//判断是否已经注册
                this.opts={
                    OWNER_REGISTER:opts.smsTPL,//短信编码
                    getCodeBtn:opts.getCodeBtn,//获取验证码
                    agreeBtn:opts.agreeBtn,//协议按钮
                    resBtn:opts.resBtn,//注册按钮
                    formInput:opts.formInput,//表单文本集合
                    mobileText:opts.formText.mobileText,//手机号
                    codeText:opts.formText.codeText,//短信验证码
                    passText:opts.formText.passText,//密码框
                    eyesBtn:opts.eyesBtn, //密码眼睛按钮
                    codeImg:opts.model.codeImg,//图片验证码
                    modal:opts.model.modal,//模态框
                    modalSure:opts.model.sureBtn,//模态框确定按钮
                    modalCancel:opts.model.cancelBtn,//模态框关闭按钮,
                    imgTextBox:opts.model.imgTextBox//图像验证码文本框
                };
                //公共方法   密码眼睛显示修改-----------------------------
                oPublic.eyesPassWord(this.opts.eyesBtn,this.opts.passText);


                //公共方法  弹窗获取验证码---------------------------
                oPublic.picAlertbox(
                        this.opts.getCodeBtn,
                        this.opts.modalCancel,//取消
                        this.opts.modalSure,//确认
                        this.opts.codeImg,
                        this.opts.mobileText,
                        this.opts.modal,
                        this.opts.codeText,
                        this.opts.imgTextBox,
                        this.opts.OWNER_REGISTER,
                        this.required_register
                );

                //公共方法   错误样式样式清楚-----------------------------------
                oPublic.focusCancel(this.opts.formInput);


                //激活注册按钮
                this.formStatus(
                        this.opts.formInput,//表单集合
                        this.opts.resBtn,//注册按钮
                        this.opts.codeText,//验证码
                        this.opts.passText,
                        this.opts.agreeBtn,
                        this.opts.mobileText
                    );


                //表单事件
                this.formEvent(
                        this.opts.agreeBtn,//同意协议
                        this.opts.resBtn,//注册按钮
                        this.opts.codeText,//验证码
                        this.opts.passText,//密码
                        this.opts.mobileText//手机号
                    );


                //ajax注册请求
                this.subResAjax(
                    this.opts.resBtn,
                    this.opts.mobileText,
                    this.opts.codeText,
                    this.opts.passText,
                    this.opts.formInput
                )

            },
            //激活注册按钮--------
            formStatus:function(opts,btns,codeText,passText,agreeBtn,mobileText){
                //判断按钮状态
                var self=this;
                $(opts).keyup(function(){
                    self.textNum(btns,mobileText,codeText,passText,agreeBtn);
                })
            },
            //表单事件--------------------------
            formEvent:function(imgBtns,resBtn,codeText,passText,mobileText){
                var self=this;
                $(imgBtns).on("click",function(){
                    var imgSrc=$(this).attr("data-tog");//勾选路径获取
                    var codeTextValue=$(codeText).val();
                    var passLen=$(passText).val();
                    var telephone=$(mobileText).val();
                    if($(this).attr("src").indexOf("active")!==-1){
                        $(this).attr("src",imgSrc);
                        $(resBtn).attr("disabled",true).removeClass("active_status");
                    }else{
                        $(this).attr("src","../../common/image/arguments_btn_active.png");
                        if(codeTextValue.length===4){
                            if(passLen.length>=8&&passLen.length<=16&&telephone.length===11){
                                 $(resBtn).attr("disabled",false).addClass("active_status");
                            }else{
                                 $(resBtn).attr("disabled",true).removeClass("active_status");
                            }
                        }else{
                            $(resBtn).attr("disabled",true).removeClass("active_status"); 
                        }
                    }
                });
            },
            //用户提交注册
            subResAjax:function(resBtn,mobileText,codeText,passText,formInput){
                $(resBtn).on("click",function(){
                      var flag=true;
                      $(formInput).each(function(){
                            var oValue=$(this).val();
                            var errorMsg=$(this).attr("data-error");
                            var regStr=$(this).attr("data-reg");
                            var reg=new RegExp(regStr);
                            if(reg&&!reg.test(oValue)){
                                oPublic.errorText($(this),errorMsg,"warn","dl",".pass_eye em");
                                flag=false;
                                return;
                            }
                      });

                      //如果验证通过则发送请求--------------------------------
                      if(flag){
                          $(".loading_model").show();
                          var module=localStorage.getItem("public_key");
                          var expection=localStorage.getItem("mi_key");
                          var snCode=$(".scanning em").eq(1).html();
                          $.ajax({
                            type:"get",
                            url:oPublic.basePath()+"/s/bike/owner/register",
                            data:{
                                invitationCode:snCode,
                                mobile:$(mobileText).val(),
                                password:RSAUtils.encryptByPublicKey(module,expection,$(passText).val()),
                                validateCode:$(codeText).val(),
                                isWechat:baseAll.isMobileDevice()=='ios'?"YES":"NO"
                            },
                            success:function(data){
                                if(data.opStatus==0){
                                     $(".loading_model").hide();
                                     oPublic.pubilcModal("注册成功","确定","link");
                                }else{
                                     $(".loading_model").hide();
                                     oPublic.pubilcModal(data.msgDesc,"确定");
                                }
                            },
                            error:function(){
                                 $(".loading_model").hide();
                                 oPublic.pubilcModal("网络连接失败");
                            }
                        })
                      }
                         
                })
            },
            //文本字数------------
            textNum:function(btns,mobileText,codeText,passText,agreeBtn){
                    var codeTextValue=$(codeText).val();
                    var passLen=$(passText).val();
                    var telephone=$(mobileText).val();
                    if(codeTextValue.length===4&&$(agreeBtn).attr("src").indexOf("active")!==-1){
                        if(passLen.length>=8&&passLen.length<=16&&telephone.length===11){
                            $(btns).attr("disabled",false).addClass("active_status");
                        }else{
                            $(btns).attr("disabled",true).removeClass("active_status");
                        }
                    }else{
                        $(btns).attr("disabled",true).removeClass("active_status"); 
                    }
                }
        };
        window.registerMode=new RegisterMode();
    })();



    //注册页面参数配置------------------------------------
    registerMode.init({
        formInput:".formInput",
        eyesBtn:".pass_eye",
        resBtn:"#res_btn",
        formText:{
             mobileText:"#mobile",
             codeText:"#codes",
             passText:".pass_mode"
        },
        agreeBtn:"#agree_btn",//协议勾选
        getCodeBtn:"#get_code",
        model:{ //模态框
                modal:"#registerModal",
                sureBtn:".sureBtn",
                cancelBtn:".closed_btn",
                codeImg:"#codeImg",//验证码图片
                imgTextBox:"#random_code"//图片随机验证码
        },
        required_register:false,
        smsTPL:oPublic.OWNER_REGISTER//短信模板编码
    });






















</script>